<template>
	<div>
		<div class="detail-title">景点推荐</div>
		<ul class="item-info">
			<li class="item-list" v-for="(item, key) in list" :key="item.id">
				<div class="item-list-title">{{item.title}}<br><span class="item-list-title-time">{{item.time}}</span></div>
				<div class="item-list-right">
					<div class="item-list-money"><em class="item-list-Symbol">￥</em>188<em class="item-list-Symbol">起</em></div>
					<button class="right-btn">预定</button>
				</div>
			</li>
		</ul>
	</div>
</template>

<script>
export default {
	name: 'DetailList',
	props: {
		list: Array
	}
}
</script>

<style lang="stylus" scoped="">
@import '~styles/varibles'
@import '~styles/mixins'
.detail-title
	height: .8rem
	line-height: .8rem
	text-indent: .2rem
	background: #eee
	font-size:.32rem
.item-info
	padding:0 .3rem
	.item-list
		border-bottom:solid 1px #eee
		display: flex
		padding:.3rem 0
	.item-list-title
		flex: 1
		line-height: .4rem
		font-size: .30rem
		.item-list-title-time
			display:inline-block
			margin-top: .1rem
			line-height: .4rem
			color: #999
	.item-list-right
		width: 1.6rem
		padding-left: .2rem
		text-align:center
		.item-list-money
			color: #ff8c12
			font-size: .32rem
			.item-list-Symbol
				font-size: .24rem
		.right-btn
			width:1.5rem
			border-radius:.06rem
			height:.6rem
			margin-top: .1rem
			background:linear-gradient(-35deg,#ff8c12 37%,#ffab1e 100%)
			color: #fff
</style>